<template>
	<view class="container">
		<view class="info">
			<view class="item_r">
				<image :src="avatar" mode="widthFix"></image>
				<view>
					<view class="name">
						{{nickname}}
					</view>
					<view class="phone">
						{{mobile}}
					</view>
				</view>

			</view>
			<view class="del" @click="delOne">
				删除
			</view>
		</view>

		<view class="edit">
			<view class="ipt">
				<view>
					<text>分成模式</text>
					<!-- <input type="text" value="" /> -->
					<text>按比例</text>
				</view>
				<view>
					<text>分成比例</text>
					<view class="bili">
						<input type="number" value="" v-model="fen_rate" placeholder="请输入分成比例" />
						<text>%</text>
					</view>
				</view>
			</view>

			<view class="btn">
				<button type="default" @click="set">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		fItem,
		delItem,
		setFenZhang
	} from '../../../api/api.js'
	export default {
		data() {
			return {
				avatar: '',
				nickname: "",
				mobile: '',
				list_id: '',
				device_id:'',
				fen_rate:''
			}
		},
		onLoad(options) {
			this.list_id = options.id
			this.getInfo()
		},
		methods: {
			getInfo() {
				fItem({
					list_id: this.list_id
				}).then(res => {
					this.avatar = res.data.avatar
					this.nickname = res.data.nickname
					this.mobile = res.data.mobile
					this.device_id = res.data.device_id
				})
			},
			set() {
				if (!this.fen_rate || this.fen_rate > 100) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的比例'
					})
					return
				}
				setFenZhang({
					mobile: this.mobile,
					fen_rate: this.fen_rate,
					device_id: this.device_id
				}).then(res => {
					console.log(res)
					if(res.code == 1){
						uni.showModal({
							title:'提示',
							content:'设置分账成功',
							showCancel:false,
							success() {
								uni.navigateBack({
									
								})
							}
						})
						
					}
				})
			},
			delOne() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除此分账人员么？',
					success(res) {
						if (res.confirm) {
							delItem({
								list_id: that.list_id
							}).then(res => {
								if(res.code == 1){
									uni.showModal({
										title:'提示',
										content:'删除成功',
										showCancel:false,
										success() {
											uni.navigateBack({
												
											})
										}
									})
									
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}

	.info {
		width: calc(100%);
		height: 150upx;
		padding: 0 30upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20upx;

		.item_r {
			height: 100%;
			display: flex;
			align-items: center;

			image {
				width: 100upx;
				margin-right: 20upx;
			}

			view {
				font-size: 24upx;
				margin-bottom: 10upx;

				.name {
					margin-top: 20upx;
					font-size: 28upx;
					color: #333333;
				}

				.phone {
					font-size: 24upx;
					color: #999999;
				}
			}

		}

		.del {
			width: 100upx;
			height: 60upx;
			background: #FFFFFF;
			border: 1upx solid #E6E6E6;
			border-radius: 8upx;
			text-align: center;
			line-height: 60upx;
			font-size: 22upx;
			font-weight: 500;
			color: #666666;
		}





	}


	.edit {
		.ipt {
			width: calc(100%);
			margin: 0 auto;
			background-color: #FFFFFF;
			border-radius: 15upx;

			view {
				height: 90upx;
				width: calc(100%);
				padding: 0 30upx;
				border-bottom: 1upx solid #f8f8f8;
				display: flex;
				justify-content: space-between;
				align-items: center;


				&>input {
					width: 250upx;
					text-align: right;
				}

				.bili {
					width: 260upx;
					padding: 0;

					&>input {
						width: 250upx;
						text-align: right;
						margin-right: 10upx;
					}
				}
			}

		}

		.btn {
			width: calc(100%);
			height: 90upx;
			margin: 50upx auto;

			button {
				width: 100%;
				height: 90upx;
				line-height: 90upx;
				border-radius: 45upx;
				color: #FFFFFF;
				background-color: #3fb8ff;
			}
		}
	}
</style>
